<template>
    <div class="top">
        <el-table :data="noticeList" :empty-text="BaseConfig.emptyText" :row-key="nid.toString()" cell-class-name="pp"
                  header-cell-class-name="pp" stripe style="width: 100%" table-layout="fixed">
            <el-table-column fixed label="#" type="index"/>
            <el-table-column label="编号" prop="noticeId" width="100"/>
            <el-table-column label="标题" prop="title"/>
            <el-table-column label="内容">
                <template #default="scope">
                    <el-text truncated>{{ scope.row.context }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template #default="scope">
                    <el-text truncated>{{ dealDate(scope.row.createTime) }}</el-text>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="handleClick(scope.row)">
                        查看详情
                    </el-button>
                    <el-button link type="primary" @click="openBtn(scope.row)">
                        修改
                    </el-button>
                    <el-popconfirm
                            cancel-button-text="取消"
                            confirm-button-text="确定"
                            icon-color="#e74c3c"
                            title="确定要删除吗？"
                            @confirm="confirmEvent(scope.row)"
                    >
                        <template #reference>
                            <el-button link type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="bottom">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="ptotal"
                hide-on-single-page
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
        />
    </div>
  <!--公告详情的组件-->
    <el-drawer v-model="drawer" class="drawer" size="20%" title="公告详情"
               @close="closeDrawer">
        <div class="span">{{ publicForm.noticeId }}</div>
        <div class="span" style="font-weight: bold">{{ publicForm.title }}</div>
        <div class="span">{{ dealDateTime(publicForm.createTime as string) }}</div>
        <div class="last">{{ publicForm.context }}</div>
    </el-drawer>
  <!--修改公告的组件-->
    <el-dialog v-model="dialogVisible" destroy-on-close draggable title="修改公告" width="25%" @closed="closeDrawer">
        <el-form ref="updateRef" :model="publicForm" :rules="rules" hide-required-asterisk>
            <el-form-item label="标题" prop="title">
                <el-input v-model="publicForm.title"/>
            </el-form-item>
            <el-form-item label="内容" prop="context">
                <el-input v-model="publicForm.context" autosize maxlength="200" show-word-limit type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
        <el-button @click="closeDrawer">取消</el-button>
        <el-button type="primary" @click="updateNotice(updateRef)">
          修改
        </el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import { BaseConfig } from '@/config/config'
import { onMounted, ref, watch } from 'vue'
import { Notice } from '@/ts/type'
import { dealDate, dealDateTime } from '@/utils/commonUtils'
import { NoticeService } from '@/api'
import { EventBus } from '@/utils/mitt'
import { Message, Notification } from '@/plugins/element'
import { noticeInit, rules } from '@/config/formConfig'
import type { FormInstance } from 'element-plus'

const nid = ref<number>(0)
const updateRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(false)
const open = ref<boolean>(false)
const currentPage = ref<number>(1)
const pageSize = ref<number>(13)
const ptotal = ref<number>(0)
const drawer = ref(false)
const noticeList = ref<Notice[]>([])
const publicForm = ref<Notice>({ ...noticeInit })

// 查看详情
const handleClick = (res: Notice) => {
  drawer.value = true
  publicForm.value = res
}

// 组件关闭的回调
const closeDrawer = () => {
  drawer.value = false
  dialogVisible.value = false
  publicForm.value = { ...noticeInit }
}

// 监听NoticeSearch事件
EventBus.on('noticeSearchForm', async form => {
  publicForm.value = form
  currentPage.value = 1
  pageSize.value = 13
  ptotal.value = 0
  await getPage()
  open.value = true
})

// 模糊分页查询
const getPage = () => {
  NoticeService.getNotices(currentPage.value, pageSize.value, publicForm.value).then(res => {
    const { total, list } = res.data
    ptotal.value = total
    noticeList.value = list
  })
}

// 监听重置事件
EventBus.on('noticeOpen', e => {
  open.value = e
  currentPage.value = 1
  pageSize.value = 13
  ptotal.value = 0
  getList()
})

// 获取公告列表
const getList = async () => {
  await NoticeService.noticePage(currentPage.value, pageSize.value).then(res => {
    const { total, list } = res.data
    list.forEach(value => {
      nid.value = value.noticeId as number
    })
    ptotal.value = total
    noticeList.value = list
  })
}

// 删除公告
const confirmEvent = (scope: Notice) => {
  const { noticeId } = scope
  NoticeService.deleteNotice(noticeId as number).then(res => {
    Notification.success(res.data)
    getList()
  })
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  if (open.value) {
    getPage()
  } else {
    getList()
  }
}

// 打开修改公告按钮
const openBtn = async (form: Notice) => {
  const { noticeId } = form
  await NoticeService.selectByPrimaryKey(noticeId as number).then(res => {
    publicForm.value = res.data
  })
  dialogVisible.value = true
}

// 修改公告
const updateNotice = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      NoticeService.putNotice(publicForm.value).then(res => {
        getList()
        closeDrawer()
        Notification.success(res.data)
      })
    } else {
      Message.error('请检查输入内容')
    }
  })
}

watch(noticeList.value, (newVal: Notice[]) => {
  newVal.forEach(value => {
    nid.value = value.noticeId as number
  })
})

onMounted(() => {
  getList()
})
</script>

<style lang='scss' scoped>
:deep(.pp ) {
  text-align: center;
}

.top {
  flex: 1;
}

.bottom {
  height: 30px;
  margin: 15px auto 0;
}

.span {
  margin: 20px 0;
  text-align: center;
}

.last {
  white-space: pre-line;
  line-height: 3em;
  text-indent: 2em;
}
</style>